import React, { lazy } from "react";
import App from "../App";
import { createBrowserRouter, Navigate } from "react-router-dom";
import Layout from "@/pages/layout";
import { useSelector } from 'react-redux';

// import Page1 from "@/pages/page1/index";
// import Page2 from "@/pages/page2/index";
const Page1 = lazy(() => import("@/pages/page1/index"));
const Page2 = lazy(() => import("@/pages/page2/index"));
const Table = lazy(() => import("@/pages/table/index"));
const Form = lazy(() => import("@/pages/form/index"));
// const Page3 = lazy(() => import("@/pages/page3/index"));
import Page3 from "@/pages/page3/index";

import Login from"@/pages/login/index";
const routes = [
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "login",
        title: "login",
        element: <Login />,
      },
      {
        element: <Layout />,
        children: [
          { path: "", element: <Navigate to={localStorage.getItem('routerUrl') || 'page1'} replace /> },
          {
            path: "page1",
            title: "Page1",
            element: <Page1 />,
          },
          {
            path: "page2",
            title: "Page2",
            element: <Page2 />,
          },
          {
            path: "page3",
            title: "Page3",
            element: <Page3 />,
          },
          {
            path: "form",
            title: "form",
            element: <Form />,
          },
          {
            path: "table",
            title: "table",
            element: <Table />,
          },
          {
            path: "*",
            element: <Navigate to="/" replace={true} />,
          },
        ],
      },
    ],
  },
];
const Router = createBrowserRouter(routes);

export default Router;